<template>
	<view class="list-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="双联工作"></uni-navbar></view>

		<u-row class="nav-box" gutter="0" align="top">
			<u-col span="6" v-if="$sysMenus('cwh_lxdb')">
				<view class="nav-item" :class="filterType == 0 ? 'active' : ''" @click="nav(0)">
					<image class="image" src="/static/img/condi_nav02_off.png" mode="aspectFill"></image>
					<image class="image" src="/static/img/condi_nav02_on.png" mode="aspectFill"></image>
				</view>
			</u-col>
			<u-col span="6" v-if="$sysMenus('rddb_lxxm')">
				<view class="nav-item" :class="filterType == 1 ? 'active' : ''" @click="nav(1)">
					<image class="image" src="/static/img/condi_nav01_off.png" mode="aspectFill"></image>
					<image class="image" src="/static/img/condi_nav01_on.png" mode="aspectFill"></image>
				</view>
			</u-col>
		</u-row>

		<view class="pro-row-plus">
			<view class="pro-col" @click="navTo('/pagesA/condi/list')">
				全部问题
				<text class="text" style="color: #0077FF">{{ numAll }}</text>
			</view>
			<view class="pro-col" @click="navTo('/pagesA/condi/list?status=1')">
				待处理
				<text class="text" style="color: #F5A623">{{ num1 }}</text>
			</view>
			<view class="pro-col" @click="navTo('/pagesA/condi/list?status=2')">
				处理中
				<text class="text" style="color: #00B854">{{ num2 }}</text>
			</view>
		</view>

		<view class="com-h2"><text class="h2-title">我的问题</text></view>

		<view class="list-box" :style="{ background: loading == 'nodata' ? 'none' : '#fff' }">
			<view class="list-info_02" v-for="(item, index) of massesList" :key="item.id" @click="navTo('/pagesA/condi/detail?id=' + item.id)">
				<view class="left">
					<view class="info-title">{{ item.title }}</view>
					<view class="info-btm">
						<view class="left-name">{{ item.userName }}</view>
						<view class="line"></view>
						<view class="left-time">{{ item.submitTime }}</view>
					</view>
				</view>
				<view class="right" :style="'color:' + colorMap[item.nodeStatus]">{{ item.nodeStatusName }}</view>
			</view>

			<u-loadmore :status="loading" />
		</view>

		<u-back-top :scroll-top="scrollTop" top="200"></u-back-top>
	</view>
</template>

<script>
import dateTimePicker from '@/components/uni-datetime-picker';
import { mapState } from 'vuex';
export default {
	components: {
		dateTimePicker
	},
	data() {
		return {
			scrollTop: 0,
			filterType: 1,
			numAll: 0,
			num1: 0,
			num2: 0,

			statusMap: {
				0: '所有',
				1: '代表自行解决',
				2: '转建议',
				3: '转议案',
				4: '转上级人大常委会',
				5: '转本级人大常委会',
				6: '不予接收'
			},
			colorMap: {
				0: '#303133',
				1: '#3396fb',
				2: '#ff9900',
				3: '#19be6b',
				4: '#ce2d2c',
				5: '#909399',
				6: '#2b85e4'
			},
			status: 0,
			title: '',

			massesList: [],

			masses: {
				title: '',
				numCode: '',
				userName: '',
				stationName: '',
				submitUser: '',
				dateRangeSea: '',
				nodeStatus: ''
			},
			loading: 'loadmore'
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.loadData();
		this.loadNum();
	},
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	onReachBottom() {
		if (this.loading == 'loadmore') this.loadData('add');
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop;
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.roleCodes = this.userInfo.roleCodes.join(',');
				this.masses.currentUserId = this.userInfo.sysUser.id;
				this.masses.clientCode = this.userInfo.sysUser.clientCode;

				if (this.$sysMenus('cwh_lxdb')) {
					this.filterType = 0;
				}
				if (this.$sysMenus('rddb_lxxm')) {
					this.filterType = 1;
				}

				this.pageNum = 1;
				this.pageSize = 10;
			} else {
				this.$logout();
			}
		},
		loadData(type = 'add') {
			if (type == 'add' && this.loading == 'loading') {
				return false;
			}
			if (type == 'add' && this.loading == 'nomore') {
				return false;
			}

			this.loading = 'loading';
			if (type != 'add') {
				this.pageNum = 1;
			}
			let data = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				userId: this.userId,
				clientCode: this.clientCode,
				role: this.roleCodes,
				...this.masses
			};
			let url = '/question/masses/list';

			this.$request(url, data, {
				load: true
			}).then((res) => {
				let count = 0;
				if (type != 'add') {
					uni.stopPullDownRefresh();
					this.massesList = [];
				}
				this.loading = this.pageNum < Math.ceil(res.data.total / this.pageSize) ? 'loadmore' : 'nomore';
				this.pageNum = this.pageNum + 1;
				this.massesList = this.massesList.concat(res.data.records);
				if (this.massesList.length <= 0) {
					this.loading = 'nodata';
				}
			});
		},
		loadNum() {
			let data = {
				userId: this.userId,
				currentUserId: this.userId,
				clientCode: this.clientCode,
				role: this.roleCodes
			};

			this.$request('/question/masses/statistics_status', data, {
				load: true
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this.numAll = res.data.issueTotal;
				this.num1 = res.data.waitNum;
				this.num2 = res.data.otherNum;
			});
		},
		nav(e) {
			this.filterType = e;
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
.list-box {
	padding: 0 30rpx;
}

.nav-box {
	padding: 0 10rpx;

	.image {
		margin: 0 auto;
		width: 364rpx;
		height: 176rpx;
	}

	.image + .image {
		display: none;
	}

	.active {
		color: #e5231a;
		// background-color: #fafbfc;

		.image {
			display: none;
		}

		.image + .image {
			display: block;
		}
	}
}

.pro-row-plus {
	justify-content: space-between;

	.pro-col {
		width: 31%;
		padding: 20rpx 0;
		border-radius: 8rpx;
		background: #f3f8fd;

		.text {
			margin: 10rpx 0 0;
		}
	}
}
</style>
